<template>
	<li :class="[prefixCls+'-timeline-item']">
		<div :class="[prefixCls+'-timeline-item-tail']"></div>
		<div v-if="!$slots.node" :class="[prefixCls+'-timeline-item-node']" :style="{'border-color':color}"></div>
		<div v-if="$slots.node" :class="[prefixCls+'-timeline-item-node-custom']"><slot name="node"></slot></div>
		<div :class="[prefixCls+'-timeline-item-content']">
			<div class="title" v-if="title">{{title}}</div>
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</li>
</template>

<script>
import {prefixCls} from '../prefix'

export default {
	name:`${prefixCls}TimelineItem`,
	data() {
		return {
			prefixCls: prefixCls,
		}
	},
	props: {
		title: String,
		color: String
	},
}
</script>